<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Mainframe CSS framework</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="mainframe-main.css">
	<link rel="stylesheet" type="text/css" href="mainframe-grid.css">
</head>

<body>
<!-- the id on the containing div determines the page width. -->
<!-- #fixed = 974px, #fluid = 100% -->
<div class="fixed12">					

<h1>An h1 heading</h1>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>
<h2>An h2 heading</h2>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>
<h3>An h3 heading</h3>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>
<h4>An h4 heading</h4>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>
<h5>An h5 heading</h5>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>
<h6>An h6 heading</h6>
<p>Remotam to praeter ut nutriri usitate. Ego gnum quid rari sit. Nunquam sim componi brachia nostris has inferri similis fas. Ea occurrunt conjectus me id ad distincta medicinam. Age dum ante quia dico inde. Operis nequit primum aërem mem duo putare fit omnium. Imo his deprehendi existentia est qua cohaereant facillimam. Cau caeteri necesse quietem hac ceteris. Rebus multi ibi autho una nempe ipsas.</p>

<hr />
<br />
<ol>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
	<li>Ordered list item
	<ol>
		<li>Nested ordered list item
			<ol>
				<li>Nested ordered list item</li>
			</ol>
		</li>
	</ol>
	</li>
</ol><br />

<ul>
	<li>Unordered list item</li>
	<li>Unordered list item</li>
	<li>Unordered list item
	<ul>
		<li>Nested unordered list item
			<ul>
				<li>Nested unordered list item</li>
			</ul>
		</li>
	</ul>
	</li>
</ul><br />


<hr />

<form>
	<h4>Input</h4>
	<input type="text" name="input" id="input" value="Some text here" >
	<br /><br />
	
	<h4>Selectbox</h4>
	<select>
		<option>Select</option>
	</select>
	<br /><br />
	
	<h4>Textarea</h4>
	<textarea>Textarea</textarea>
	<br /><br />
	
	<h4>Checkbox</h4>
	<input type="checkbox">
	<br /><br />
	
	<h4>Button</h4>
	<button type="button">Button</button>
	<br /><br /><br /><br />
	
</form>

<hr />

<span class="error">span.error</span>
<div class="clear10"></div>

<div class="error">div.error</div>
<div class="clear10"></div>

<span class="notification">span.notification</span>
<div class="clear10"></div>

<div class="notification">div.notification</div>
<div class="clear10"></div>

<span class="information">span.information</span>
<div class="clear10"></div>

<div class="information">div.information</div>
<div class="clear50"></div>

<fieldset>
	<legend>Legend</legend>
	Hey, some text in here!
</fieldset>

<div class="clear50"></div>

</div>













<hr />


<h1>The Grid System</h1>
<div class="fixed12">
	<h2>12 Column Grid</h2>
	<div class="grid_12"><p>940px</p></div>
	<!-- end .grid_12 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1"><p>60px</p></div>
	<!-- end .grid_1 -->
	<div class="grid_11"><p>860px</p></div>
	<!-- end .grid_11 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_2"><p>140px</p></div>
	<!-- end .grid_2 -->
	<div class="grid_10"><p>780px</p></div>
	<!-- end .grid_10 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_3"><p>220px</p></div>
	<!-- end .grid_3 -->
	<div class="grid_9"><p>700px</p>
	</div>
	<!-- end .grid_9 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_4"><p>300px</p></div>
	<!-- end .grid_4 -->
	<div class="grid_8"><p>620px</p></div>
	<!-- end .grid_8 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_5"><p>380px</p>
	</div>
	<!-- end .grid_5 -->
	<div class="grid_7"><p>540px</p></div>
	<!-- end .grid_7 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_6"><p>460px</p></div>
	<!-- end .grid_6 -->
	<div class="grid_6"><p>460px</p></div>
	<!-- end .grid_6 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 suffix_11"><p>60px</p></div>
	<!-- end .grid_1.suffix_11 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_1 suffix_10"><p>60px</p></div>
	<!-- end .grid_1.prefix_1.suffix_10 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_2 suffix_9"><p>60px</p></div>
	<!-- end .grid_1.prefix_2.suffix_9 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_3 suffix_8"><p>60px</p></div>
	<!-- end .grid_1.prefix_3.suffix_8 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_4 suffix_7"><p>60px</p></div>
	<!-- end .grid_1.prefix_4.suffix_7 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_5 suffix_6"><p>60px</p></div>
	<!-- end .grid_1.prefix_5.suffix_6 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_6 suffix_5"><p>60px</p></div>
	<!-- end .grid_1.prefix_6.suffix_5 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_7 suffix_4"><p>60px</p></div>
	<!-- end .grid_1.prefix_7.suffix_4 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_8 suffix_3"><p>60px</p></div>
	<!-- end .grid_1.prefix_8.suffix_3 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_9 suffix_2"><p>60px</p></div>
	<!-- end .grid_1.prefix_9.suffix_2 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_10 suffix_1"><p>60px</p></div>
	<!-- end .grid_1.prefix_10.suffix_1 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_11"><p>60px</p></div>
	<!-- end .grid_1.prefix_11 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_6">
		<div class="grid_1 alpha"><p>60px</p></div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega"><p>380px</p></div>
		<!-- end .grid_5.omega -->
		<div class="clear">&nbsp;</div>
		<div class="grid_3 alpha"><p>220px</p></div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega"><p>220px</p></div>
		<!-- end .grid_3.omega -->
		<div class="clear">&nbsp;</div>
	</div>
	<!-- end .grid_6 -->
	<div class="grid_6">
		<div class="grid_3 alpha"><p>220px</p></div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega"><p>220px</p></div>
		<!-- end .grid_3.omega -->
		<div class="clear">&nbsp;</div>
		<div class="grid_1 alpha"><p>60px</p></div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega"><p>380px</p></div>
		<!-- end .grid_5.omega -->
		<div class="clear">&nbsp;</div>
	</div>
	<!-- end .grid_6 -->
	<div class="clear">&nbsp;</div>
</div>
<!-- end .fixed12 -->
<div class="fixed16">
	<h2>
		16 Column Grid
	</h2>
	<div class="grid_16"><p>940px</p></div>
	<!-- end .grid_16 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1"><p>40px</p>
	</div>
	<!-- end .grid_1 -->
	<div class="grid_15"><p>880px</p></div>
	<!-- end .grid_15 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_2"><p>100px</p></div>
	<!-- end .grid_2 -->
	<div class="grid_14"><p>820px</p></div>
	<!-- end .grid_14 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_3"><p>160px</p></div>
	<!-- end .grid_3 -->
	<div class="grid_13"><p>760px</p></div>
	<!-- end .grid_13 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_4"><p>220px</p></div>
	<!-- end .grid_4 -->
	<div class="grid_12"><p>700px</p></div>
	<!-- end .grid_12 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_5"><p>280px</p></div>
	<!-- end .grid_5 -->
	<div class="grid_11"><p>640px</p></div>
	<!-- end .grid_11 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_6"><p>340px</p></div>
	<!-- end .grid_6 -->
	<div class="grid_10"><p>580px</p>
	</div>
	<!-- end .grid_10 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_7"><p>400px</p></div>
	<!-- end .grid_7 -->
	<div class="grid_9"><p>520px</p></div>
	<!-- end .grid_9 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_8"><p>460px</p></div>
	<!-- end .grid_8 -->
	<div class="grid_8"><p>460px</p></div>
	<!-- end .grid_8 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 suffix_15"><p>40px</p></div>
	<!-- end .grid_1.suffix_15 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_1 suffix_14"><p>40px</p></div>
	<!-- end .grid_1.prefix_1.suffix_14 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_2 suffix_13"><p>40px</p></div>
	<!-- end .grid_1.prefix_2.suffix_13 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_3 suffix_12"><p>40px</p></div>
	<!-- end .grid_1.prefix_3.suffix_12 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_4 suffix_11"><p>40px</p></div>
	<!-- end .grid_1.prefix_4.suffix_11 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_5 suffix_10"><p>40px</p></div>
	<!-- end .grid_1.prefix_5.suffix_10 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_6 suffix_9"><p>40px</p></div>
	<!-- end .grid_1.prefix_6.suffix_9 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_7 suffix_8"><p>40px</p></div>
	<!-- end .grid_1.prefix_7.suffix_8 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_8 suffix_7"><p>40px</p></div>
	<!-- end .grid_1.prefix_8.suffix_7 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_9 suffix_6"><p>40px</p></div>
	<!-- end .grid_1.prefix_9.suffix_6 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_10 suffix_5"><p>40px</p></div>
	<!-- end .grid_1.prefix_10.suffix_5 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_11 suffix_4"><p>40px</p></div>
	<!-- end .grid_1.prefix_11.suffix_4 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_12 suffix_3"><p>40px</p></div>
	<!-- end .grid_1.prefix_12.suffix_3 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_13 suffix_2"><p>40px</p></div>
	<!-- end .grid_1.prefix_13.suffix_2 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_14 suffix_1"><p>40px</p></div>
	<!-- end .grid_1.prefix_14.suffix_1 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_1 prefix_15"><p>40px</p></div>
	<!-- end .grid_1.prefix_15 -->
	<div class="clear">&nbsp;</div>
	<div class="grid_8">
		<div class="grid_1 alpha"><p>40px</p></div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega"><p>400px</p></div>
		<!-- end .grid_7.omega -->
		<div class="clear">&nbsp;</div>
		<div class="grid_4 alpha"><p>220px</p></div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega"><p>220px</p></div>
		<!-- end .grid_4.omega -->
		<div class="clear">&nbsp;</div>
	</div>
	<!-- end .grid_8 -->
	<div class="grid_8"><div class="grid_4 alpha"><p>220px</p>
		</div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega"><p>220px</p></div>
		<!-- end .grid_4.omega -->
		<div class="clear">&nbsp;</div>
		<div class="grid_1 alpha"><p>40px</p></div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega"><p>400px</p></div>
		<!-- end .grid_7.omega -->
		<div class="clear">&nbsp;</div>
	</div>
	<!-- end .grid_8 -->
	<div class="clear">&nbsp;</div>
</div>
<!-- end .fixed16 -->








</body>
</html>